<!-- Dom模板 -->
<template>
  <div class="DTbox">
    <div class="dong">
      <!-- Dom内容 -->
      <div class="DTtop">
        <div class="DTback">
          <div @click="goBack()">
            <span class="iconfont icon-arrow-right-copy-copy-copy"></span>
          </div>
          <div>
            <span class="iconfont icon-zhuanfa"></span>
            <span class="iconfont icon-shenglvehao"></span>
          </div>
        </div>
        <div class="DTtitle">
          <div>
            <!-- <img :src="$store.state.bags.bookItem.img" /> -->
            <img :src="$store.state.bags.bookItem.book_img_url" />
          </div>
          <div style="position: relative">
            <div class="DTname">
              <div>{{ $store.state.bags.bookItem.bookname }}</div>
              <div>
                {{ $store.state.bags.bookItem.name }}<span>|</span>
                <!-- {{ $store.state.bags.bookItem.number }} -->
                10集<span>/</span
                >{{ $store.state.bags.bookItem.end ? "已完结" : "连载" }}
              </div>
            </div>
            <div class="DTtag">
              <div>
                <span
                  v-for="(item, index) in $store.state.bags.bookItem.typesname"
                  :key="index"
                  >{{ item }}</span
                >
              </div>
              <div>
                <button @click="login">
                  {{
                    $store.state.bags.subFlag
                      ? "已订阅"
                      : $store.state.bags.bookItem.money > 0
                      ? "+&nbsp;订阅"
                      : "免费订阅"
                  }}
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="DTtransmit">
          <div>
            <img :src="$store.state.bags.bookItem.book_img_url" />
          </div>
          <div class="DTitlt">
            <!-- {{$store.state.bags.musicIndex}}index
            {{$store.state.bags.scFlag}} -->
            <div>
              {{ $store.state.bags.bookCatalog[nowIndex].diversitynametext }}
            </div>
            <div>正在播放第{{ nowIndex + 1 }}集</div>
          </div>
          <div
            @click="
              itemClick($store.state.bags.bookCatalog[nowIndex], nowIndex)
            "
          >
            <span><img src="../../../static/img/v2_qskzvg.png" /></span>
          </div>
          <div class="shadow"></div>
        </div>
      </div>
      <div class="DTmain">
        <div class="xi">
          <div class="DTnav">
            <div>
              <div>
                {{ Number($store.state.bags.bookItem.score).toFixed(1) }}
              </div>
              <div>评分</div>
            </div>
            <div>
              <div>{{ $store.state.bags.bookItem.see_num }}<span>w</span></div>
              <div>播放量</div>
            </div>
            <div>
              <div>2.3<span>w</span></div>
              <div>订阅量</div>
            </div>
          </div>
          <div class="synopsis">
            <div>简介</div>
            <div>
              {{ $store.state.bags.bookItem.describes }}
              <!-- 第一次见，他花了五百两银子，在她成亲头一晚买了她的清白。她看到的，只是一个背影。第二次见，她仿佛看到了曾经的他第一次见 -->
            </div>
          </div>
        </div>

        <div class="catalog">
          <div class="catalogTitle">
            <div>目录</div>
            <div class="catalogRight">
              <div>
                <img src="../../../static/img/v2_qskqi2.png" />
              </div>
              <!-- {{ $store.state.bags.bookItem.number }} -->
              <div>共10集</div>
              <!-- <div><span class="iconfont icon-xialacaidanxia"></span></div> -->
            </div>
          </div>
          <ul style="position: relative; padding-bottom: 2.85rem">
            <li
              class="cataItemBox"
              v-for="(item, index) in $store.state.bags.bookCatalog"
              :key="index"
            >
              <div class="cataItemSmall" @click="itemClick(item, index)">
                <div :class="index === nowIndex ? 'cataActive' : ''">
                  <div
                    v-if="index === nowIndex"
                    class="iconfont icon-zhengzaibofang1"
                  ></div>
                  <div v-if="index !== nowIndex">{{ item.diversityname }}</div>
                </div>
                <div class="cateItemR">
                  <div class="cataItemcont">
                    <div :class="index === nowIndex ? 'cataActive' : ''">
                      {{ item.diversitynametext }}
                    </div>
                    <div>
                      <!-- 时长<span ref="timeList">{{ item.diversitytime }}</span
                      ><span class="timeList"> -->
                      2021/05/04
                      <!-- </span> -->
                    </div>
                  </div>
                </div>
              </div>
              <div @click="download(item, index)">
                <img src="../../../static/img/v2_qskq3k.png" />
              </div>
              <!-- <div @click="stopBubble">
                <a :href="item.book_text_url">
                  <img src="../../../static/img/v2_qskq3k.png" />
                </a>
              </div> -->
            </li>
            <div class="noMore">没有更多了</div>
          </ul>
        </div>
      </div>
      <div>
        <Alert :transition="transition" @close="closeAlert()" v-if="alertFlag">
          <component :is="$store.state.bags.componentPath"></component>
        </Alert>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import Alert from "../alert/alert.vue";
import pay from "./pay.vue";
import topup from "./topup.vue";
import affirm from "./affirm.vue";
import { alert_parent } from "../alert/alert_mixin.js";
import axios from "axios";
import { xiazai } from "../../api/userFun";
import { Toast } from "vant";
export default {
  mixins: [alert_parent],
  data() {
    return {
      msg: "测试",
      nowIndex: 0,
      payFlag: false,
      flag: false,
      transition: {
        from: "bottom",
        to: "bottom",
      },
      components: "",
    };
  },
  components: {
    Alert,
    pay,
    topup,
    affirm,
  },
  // 生命周期 - 创建完成（访问当前this实例）
  beforeCreate() {},
  created() {
    this.$store.dispatch("bags/getUserMsg", {
      userid: sessionStorage.getItem("userId"),
    });
    this.$store.dispatch("login/getUser", {
      userid: sessionStorage.getItem("userId"),
    });

    // console.log(this.$store.state.bags);
    // console.log(b);
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    console.log(this.$store.state.bags.bookCatalog);
    //音频表 每一章
    // if(this.$store.state.bags.musicIndex){
    //   this.nowIndex=this.$store.state.bags.musicIndex
    // }
    // console.log();

    if (sessionStorage.getItem("userId")) {
      let list = this.$store.state.login.loginuserMsg.viewing.cont;
      if (list) {
        // console.log(this.$store.state.login.loginuserMsg.viewing.cont);
        // console.log(list);
        let findIndex = list.findIndex((item, index) => {
          return this.$store.state.bags.bookItem.bookid === item.bookid;
        });
        // console.log(findIndex);
        if (findIndex === -1) {
          this.nowIndex = 0;
        } else {
          this.nowIndex = list[findIndex].diversity - 1;
        }
      }
    }
    this.$nextTick(function () {
      if (this.$store.state.bags.bookCatalog) {
        this.$store.state.bags.bookCatalog.forEach((item, index) => {
          // item.diversitytime = this.timeFun(item.book_text_url);
          // item.diversitytime = this.timeFun(item.book_text_url);
          // console.log(this.timeFun(item.book_text_url));
          // 创建audio标签，并删除
          // this.itemFun(item.book_text_url,index)
        });
      }
    });
  },
  // Vue方法定义
  methods: {
    itemFun(src, index) {
      let audio = document.createElement("audio");
      audio.src = src;
      // console.log(audio);
      document.body.appendChild(audio); //将a追加到页面上
      audio.load();
      let that = this;
      audio.oncanplay = function () {
        let time = audio.duration;
        // console.log(time);
        let min = parseInt(time / 60);
        let sec = parseInt(time % 60);
        if (min.toString().length == 1) {
          min = `0${min}`;
        }
        if (sec.toString().length == 1) {
          sec = `0${sec}`;
        }
        time = `${min}:${sec}`;
        that.$store.state.bags.bookCatalog[index].diversitytime = time;
        console.log(
          that.$store.state.bags.bookCatalog[index].diversitytime,
          "事件"
        );
        console.log(time);
        that.$refs.timeList[index].innerHTML = time;
      };
    },
    itemClick(item, index) {
      if (this.$store.state.bags.bookItem.money <= 0) {
        this.nowIndex = index;
        this.$store.commit("bags/getMusicItem", { item, index });
        this.$router.history.push({
          path: "/playmusic",
          query: {
            path: this.$route.path,
            beforePath: this.$route.query.path,
          },
        });
      } else {
        if (sessionStorage.getItem("userId")) {
          this.$store.dispatch("login/getUser", {
            userid: sessionStorage.getItem("userId"),
          });
          if (this.$store.state.bags.subFlag) {
            this.nowIndex = index;
            console.log(item, "item音乐");
            this.$store.commit("bags/getMusicItem", { item, index });
            this.$router.history.push({
              path: "/playmusic",
              query: {
                path: this.$route.path,
                beforePath: this.$route.query.path,
              },
            });
          } else {
            Toast({
              message: "请先订阅本书籍",
              position: "bottom",
            });
          }
        } else {
          this.$router.history.push({
            path: "/login",
            query: {
              path: this.$route.path,
              beforePath: this.$route.query.path,
            },
          });
        }
      }

      // console.log(item);
      // console.log("item");
    },
    goBack() {
      // this.$router.history.go(-1);
      // console.log(this.$route.query);
      this.$router.history.push(this.$route.query.path);
    },
    login() {
      if (!sessionStorage.getItem("token")) {
        this.$router.history.push({
          path: "/login",
          query: {
            path: this.$route.path,
            beforePath: this.$route.query.path,
          },
        });
      } else {
        this.$store
          .dispatch("bags/getUserMsg", {
            userid: sessionStorage.getItem("userId"),
          })
          .then((res) => {
            if (!this.$store.state.bags.subFlag) {
              if (this.$store.state.bags.bookItem.money > 0) {
                this.$store.commit("bags/componentPath", "pay");
                this.openAlert();
                // console.log(this.openAlert);
                // console.log(this.$store.state.bags.bookItem.money);
              } else {
                this.$store.dispatch("bags/subscription", {
                  userid: this.$store.state.login.loginuser.userid,
                  bookid: this.$store.state.bags.bookItem.bookid,
                });
                // console.log(this.$store.state.bags.bookItem);
              }
              console.log(this.$store.state.bags.subFlag);
            } else {
              Toast({
                message: "已订阅",
                position: "bottom",
              });
            }
          });
      }
    },
    download(item, index) {
      if (!sessionStorage.getItem("token")) {
        this.$router.history.push({
          path: "/login",
          query: {
            path: this.$route.path,
            beforePath: this.$route.query.path,
          },
        });
      } else {
        if (this.$store.state.bags.subFlag) {
          let urls =
            this.$store.state.bags.bookCatalog[
              this.$store.state.bags.musicIndex
            ].book_text_url;
          this.$store
            .dispatch("bags/downloads", urls.split("static")[1])
            .then((data) => {
              var blob = new Blob([data], {
                type: "application/force-download;charset=utf-8",
              });
              var url = window.URL.createObjectURL(blob);
              var aLink = document.createElement("a");
              aLink.style.display = "none";
              aLink.download = decodeURI("fileName.mp3");
              aLink.href = url;
              console.log(url);
              document.body.appendChild(aLink);
              aLink.click();
              document.body.removeChild(aLink); //下载完成移除元素
              window.URL.revokeObjectURL(url); //释放掉blob对象
            });
          this.$store.dispatch("bags/getdownload", {
            bookid: item.bookid,
            type: "add",
            userid: sessionStorage.getItem("userId"),
            diversity: index + 1,
            diversityid: item.diversityid,
          });
        } else {
          Toast({
            message: "请先订阅书籍",
            position: "bottom",
          });
        }
        //  this.$store.dispatch("bags/getdownload",{bookid:item.bookid,type:'add',userid:sessionStorage.getItem('userId'),diversity:index+1,diversityid:item.diversityid})
      }
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
/* 顶部 */
.DTbox {
  background-color: #6c8c93;
  width: 100vw;
  height: 100vh;
  /* height: calc(100vh - 1.493333rem); */
  overflow: hidden;
  z-index: 100;
}
/* .left-enter{
  transform: translateX(100%);
}
.left-leave-to{
  transform: translateX(100%);
}
.hua{
  width:100%;
  height:auto;
   transition:all 0.5s ease-in-out;
} */

/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.DTtop {
  width: 100%;
  height: 7.066667rem;
  padding: 0 0.4rem 0 0.453333rem;
  position: fixed;
  background: #6c8c93;
  top: 0;
  left: 0;
  z-index: 55;
}
.dong {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
}
.DTback {
  display: flex;
  justify-content: space-between;
  color: white;
}
.DTback > div:nth-child(1) span {
  font-size: 1.12rem;
  display: inline-block;
}
.DTback > div:nth-child(1) {
  transform: rotate(180deg);
}
.DTback > div:nth-child(2) span {
  font-size: 0.56rem;
  display: inline-block;
  margin-top: 0.266667rem;
  margin-left: 0.4rem;
}

/* 标签 */
.DTtag {
  display: flex;
  position: absolute;
  left: 0;
  justify-content: space-between;
  width: 58vw;
  top: 2.053333rem;
  /* margin-top: 25px; */
}
.DTtag > div:nth-child(1) {
  width: 3.413333rem;
}
.DTtag > div:nth-child(1) span {
  display: inline-block;
  width: 1.546667rem;
  height: 0.586667rem;
  line-height: 0.533333rem;
  border-radius: 0.053333rem;
  background-color: rgba(0, 0, 0, 0.13);
  text-align: center;
  color: white;
  margin-right: 0.106667rem;
  margin-top: 0.106667rem;
  font-size: 0.293333rem;
  font-family: PingFangSC-regular;
}
.DTtag > div:nth-child(2) {
  margin-left: 0.4rem;
  margin-top: 0.266667rem;
}
.DTtag > div:nth-child(2) button {
  width: 1.893333rem;
  height: 0.88rem;
  border: none;
  outline: none;
  border-radius: 0.666667rem;
  color: rgba(16, 16, 16, 1);
  /* font-weight: 520; */
  font-size: 0.4rem;
  font-family: PingFangSC-regular;
}
.DTtitle {
  display: flex;
  width: 92vw;
  /* margin:0 auto; */
}
.DTtitle > div:nth-child(1) img {
  width: 2.72rem;
  height: 3.44rem;
  border-radius: 0.106667rem;
}
.DTtitle > div:nth-child(2) {
  margin-left: 0.48rem;
  width: 59vw;
}

/* 标题 */
.DTname > div:nth-child(1) {
  color: rgba(255, 255, 255, 100);
  font-size: 0.586667rem;
  font-family: PingFangSC-regular;
  margin-bottom: 0.026667rem;
  width: 53vw;
}
.DTname > div:nth-child(2) {
  height: 0.48rem;
  color: rgba(255, 255, 255, 100);
  font-size: 0.32rem;
  width: 200px;
  font-family: PingFangSC-regular;
}
.DTname > div:nth-child(2) span {
  margin: 0 0.16rem;
}

/* 播放器 */
.DTtransmit {
  position: relative;
  /* width: 8.933333rem; */
  width: 90vw;
  height: 1.786667rem;
  line-height: 0.533333rem;
  border-radius: 0.213333rem;
  margin: 0.426667rem auto 0.32rem;
  display: flex;
  padding: 0.266667rem 0.533333rem 0.213333rem 0.48rem;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.21);
}
.DTtransmit > div:nth-child(1) img {
  width: 0.96rem;
  height: 1.306667rem;
  border-radius: 0.106667rem;
}
.DTitlt {
  /* margin-left: 20px; */
  margin-top: 0.08rem;
}
.DTitlt > div:nth-child(1) {
  width: 46vw;
  height: 0.583333rem;
  color: rgba(255, 255, 255, 100);
  font-size: 0.48rem;
  margin-bottom: 0.08rem;
  text-align: left;
  font-family: PingFangSC-regular;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.DTitlt > div:nth-child(2) {
  width: 3.173333rem;
  height: 0.48rem;
  color: rgba(178, 193, 194, 100);
  font-size: 0.32rem;
  text-align: left;
  font-family: PingFangSC-regular;
}
.DTtransmit > div:nth-child(3) {
  margin-top: 0.266667rem;
}
.DTtransmit > div:nth-child(3) span {
  width: 0.853333rem;
  height: 0.853333rem;
  border-radius: 50%;
  display: inline-block;
  line-height: 0.853333rem;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.28);
}
.DTtransmit > div:nth-child(3) img {
  margin-top: 0.16rem;
  margin-left: 0.053333rem;
}

.DTcomment {
  margin-top: 0.32rem;
}
.DTcomment > div {
  color: rgba(0, 0, 0, 1);
  font-size: 0.346667rem;
  margin-bottom: 0.106667rem;
  text-align: left;
  font-family: PingFangSC-regular;
  height: 0.586667rem;
}
/* 阴影 */
.shadow {
  position: absolute;
  width: 1.36rem;
  /* background-color: rgba(0, 0, 0, 0.06); */
  height: 1.36rem;
  border-radius: 50%;
  left: 0.666667rem;
  top: 0.16rem;
  border: 10px solid rgba(0, 0, 0, 0.08);
}

/* 白色部分 */
.DTmain {
  width: 100vw;
  overflow-y: auto;
  background-color: white;
  border-radius: 0.373333rem 0.373333rem 0 0;
  z-index: 888;
  position: relative;
  top: 7.066667rem;
}

/* 导航 */
.DTnav {
  display: flex;
  justify-content: space-around;
  padding: 0.453333rem;
}
.DTnav > div > div:nth-child(1) {
  width: 2.4rem;
  height: 0.853333rem;
  color: black;
  font-size: 0.586667rem;
  text-align: center;
  font-family: PingFangSC-regular;
}
.DTnav > div > div:nth-child(2) {
  width: 2.4rem;
  height: 0.4rem;
  color: rgba(158, 158, 158, 1);
  font-size: 0.293333rem;
  text-align: center;
  font-family: PingFangSC-regular;
}

/* 简介 */
.synopsis {
  color: rgba(0, 0, 0, 1);
  font-size: 0.48rem;
  font-family: PingFangSC-bold;
}
.synopsis > div:nth-child(1) {
  color: rgba(0, 0, 0, 1);
  font-size: 0.48rem;
  font-family: PingFangSC-bold;
  margin-left: 0.533333rem;
}
.synopsis > div:nth-child(2) {
  margin-top: 0.186667rem;
  border-bottom: 2px solid #eee;
  color: rgba(39, 39, 39, 1);
  font-size: 0.346667rem;
  font-family: PingFangSC-regular;
  /* width: 9.066667rem; */
  width: 90.6vw;
  margin-left: 0.533333rem;
  /* height: 64px; */
  padding-bottom: 0.266667rem;
}

/* 目录 */
.catalogTitle {
  display: flex;
  justify-content: space-between;
  padding: 0.32rem 0.533333rem;
}
.catalogTitle > div:nth-child(1) {
  width: 0.986667rem;
  height: 0.64rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.48rem;
  text-align: left;
  font-family: PingFangSC-bold;
}
.catalogRight {
  display: flex;
}
.catalogRight > div img {
  margin-right: 0.48rem;
  width: 0.533333rem;
  height: 0.506667rem;
}
.catalogRight > div:nth-child(2) {
  width: 1.626667rem;
  height: 0.613333rem;
  color: rgba(90, 90, 90, 100);
  font-size: 0.4rem;
  font-family: PingFangSC-regular;
}
.catalogRight > div:nth-child(3) span {
  margin-top: 0.053333rem;
  margin-left: 0.32rem;
  display: inline-block;
}
.cataItemBox {
  display: flex;
  /* height: 68px; */
}
.cataItemBox > div:nth-child(2) {
  margin-top: 0.533333rem;
}
.cataItemSmall {
  display: flex;
  width: 85vw;
}
.cataItemSmall > div:nth-child(1) {
  color: rgba(160, 160, 160, 100);
  font-size: 0.48rem;
  /* margin: 0 0.693333rem 0 0.533333rem; */
  line-height: 1.813333rem;
  font-family: PingFangSC-regular;
}
.cataItemSmall > div:nth-child(1) div {
  width: 65px;
  text-align: center;
}
.cataItemcont {
  padding-top: 0.266667rem;
  padding-bottom: 0.106667rem;
}
.cataItemcont > div:nth-child(1) {
  color: rgba(0, 0, 0, 1);
  font-size: 0.48rem;
  font-family: PingFangSC-regular;
}
.cataItemcont > div:nth-child(2) {
  color: rgba(116, 116, 116, 100);
  height: 0.48rem;
  margin-top: 0.08rem;
  font-size: 0.32rem;
  font-family: PingFangSC-regular;
}
.cataItemcont > div:nth-child(2) .timeList {
  margin-left: 0.693333rem;
}
.cateItemR {
  /* display: flex;
  justify-content: space-between; */
  border-bottom: 1px solid #eee;
  width: calc(100vw - 124px);
}
.cateItemR > div:nth-child(2) {
  margin-right: 0.56rem;
  margin-top: 0.56rem;
}
.catalog .cataItemBox .cataActive {
  color: rgba(243, 58, 101, 100);
}

/* 没有更多了 */
.noMore {
  position: absolute;
  bottom: 50px;
  font-size: 18px;
  left: 50%;
  margin-left: -45px;
  color: rgb(153, 149, 149);
}
</style>
<style>
/* .van-toast{
      top:80%;
    } */
</style>